<template>
    <div class="master">
      <!-- 左侧菜单 -->
      <div class="left noselectcss">
        <div class="leftHeader">
          <div class="leftHeaderL">
            <img class="leftHeaderLimg" mode="widthfix"  src="../assets/logo1.png" alt="">
          </div>
          <div class="leftHeaderR">{{proname}}</div>
        </div>
        <div class="leftBody">
          <div :class="selectNum==index?'leftBodyList center lightbluecss wightFontcss':'leftBodyList center'" 
          v-for="(item,index) in list" :key="index" @click="selectTap(index)">
            <div class="leftBodyList1 center">
              <img class="leftHeaderLimg1" :src="item.icon" alt="">
            </div>
            <div class="leftBodyList2 center">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 顶部菜单 -->
      <div class="right">
        <div class="rightHeader">
          <div class="rightHeader1"></div>
          <div class="rightHeader2">
            <div class="rightHeader21"></div>
            <div class="rightHeader22">
              <img class="rightHeader22" src="../assets/userLogo.png" mode="widthfix" alt="">
            </div>
            <div class="rightHeader24 center">
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{name}}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
        <!-- 预留插槽，用于放置主内容 -->
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  import logoPng from '@/assets/logo.png';
  //import logoPng1 from '@/assets/logo1.png';
  export default {
    // 修改组件名为多单词形式
    name: 'AppMaster',
    props: {
      name: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        list: [
          {
            name: '主题列表',
            icon: logoPng,
            page: '/TopicManager'
          },
            //   {
            //  name: 'AI助手',
            //  icon: logoPng1,
            // page: '/AiChatView'
            // },
        ],
        selectNum: 0,
        proname: '智能管理系统',
      };
    },
    methods: {
      selectTap(index) {
        console.log(index);
        this.selectNum = index;
        this.$router.push(this.list[index].page);
      },
      logout() {
        // 处理退出登录逻辑
        this.$router.push('/AiLoginView');
      }
    }
  };
  </script>
  
  <style scoped>
  .master {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    background-color: #f1f1f1;
  }
  .left{
    border-right: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 200px;
    background-color: #fff;
  }
  .leftHeader{
    height: 80px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 1px rgb(221, 221, 221) solid;
    margin-bottom: 10px;
  }
  .leftBody{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .leftBodyList{
    display: flex;
    height: 50px;
    width: 80%;
    border-radius: 10px;
  }
  .leftHeaderL{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .leftHeaderLimg{
    width: 30px;
    height: 30px;
  }
  .leftHeaderLimg1{
    width: 20px;
    height: 20px;
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .rightHeader {
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
  }
  .rightHeader1{
    width: 1px;
    height: 100%;
  }
  .rightHeader21{
    flex: 1;
  }
  .rightHeader2{
    display: flex;
  }
  .rightHeader22{
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 10px;
  }
  .leftBodyList2{
    margin-left: 10px;
  }
  </style>